.wrapper {
    position: relative;
    box-sizing: border-box;
    background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8));
    height: calc(100vh - 58px); /* 占据视口高度 */
    display: flex; /* 使用 Flexbox */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

.inner {
    position: relative;
    padding-top: rem(200px);
    padding-bottom: rem(120px);

    @media (max-width: 768px) { /* Replace with appropriate value */
        padding-bottom: rem(80px);
        padding-top: rem(80px);
    }
}

.title {
    font-family:
            "Greycliff CF",
            var(--mantine-font-family);
    font-size: rem(62px);
    font-weight: 900;
    height: 100%;
    position: -ms-device-fixed;
    margin: 0;
    padding: 0;
    color: light-dark(var(--mantine-color-black), var(--mantine-color-white));

    @media (max-width: 768px) {
        font-size: rem(42px);
        line-height: 1.2;
    }
}

.description {
    margin-top: var(--mantine-spacing-xl);
    font-size: rem(24px);

    @media (max-width: 768px) {
        font-size: rem(18px);
    }
}

.controls {
    margin-top: calc(var(--mantine-spacing-xl) * 2);

    @media (max-width: 768px) {
        margin-top: var(--mantine-spacing-xl);
    }
}

.control {
    height: rem(54px);
    padding-left: rem(38px);
    padding-right: rem(38px);
    transition: .3s;

    @media (max-width: 768px) {
        height: rem(54px);
        padding-left: rem(18px);
        padding-right: rem(18px);
        flex: 1;
    }
}

.dots {
    position: absolute;
    color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));

    @media (max-width: 768px) {
        display: none;
    }
}
